<template>
	<view class="page">
		<view style="background-color: #fff;width: 100%;">
			<view style="background-color: #fff;width: 100%;">
				<view class="phonenumber">
					<span class="sp_1">姓名<span class="sp_2">*</span> </span>
					<input type="text" v-model="this.name" class="inp_1" placeholder="请输入姓名">
				</view>
				<view class="phonenumber">
					<span class="sp_1">手机号 <span class="sp_2">*</span> </span>
					<input class="inp_1" type="number" v-model="this.phone"  placeholder="请输入手机号" />
				</view>

				<view class="phonenumber">
					<span class="sp_1">性别 <span class="sp_2">*</span> </span>
					<view class="select">
						<uni-data-select v-model="value" :localdata="range" @change="change"
							placeholder="选择性别"></uni-data-select>
					</view>
				</view>
				<view class="phonenumber">
					<span class="sp_1">年龄<span class="sp_2">*</span> </span>
					<input type="number" v-model="this.age" class="inp_1" placeholder="请输入年龄">
				</view>
				<view class="phonenumber">
					<span class="sp_1">当前地址<span class="sp_2">*</span> </span>
					<input type="text" v-model="this.Address" class="inp_1" placeholder="请输入地址">
				</view>

				<button class="bt_1" style="width: 50%;" @click="baocun">保存</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		CreateUser,DisposeUserrelationship,
	} from '@/utils/api.js'
	export default {
		data() {
			return {
				name: '',
				phone: '',
				age: '',
				Address: '',
				value: '',
				range: [{
						value: "男",
						text: "男"
					},
					{
						value: "女",
						text: "女"
					},
				],
			}
		},
		onLoad() {
		},
		methods: {
			baocun() {
				console.log(this.value);
				if(this.phone!=''&&this.Address!=''&&this.age!=''&&this.value!=''&&this.name!=''){
					let data1 = this.$store.state.vx_uid
					let data2 = '亲子'
					let data3 = this.phone
					
					DisposeUserrelationship(
						data1, data2, data3
					).then(res=>{
						if (res.Data.UserExists === true) {
							uni.showModal({
								content: '绑定成功。',
								showCancel: false,
								success(res) {
									if (res.confirm) {
										uni.navigateTo({
											url:'../QAGL/QAGL'
										})
									}
								}
							})
						}
					}).catch(res=>{
						if (res.Data.UserExists === true) {
							uni.showModal({
								content: '绑定成功。',
								showCancel: false,
								success(res) {
									if (res.confirm) {
										uni.navigateTo({
											url:'../QAGL/QAGL'
										})
									}
								}
							})
						}else if(res.Data.UserExists===false){
							CreateUser({
							 Phone:this.phone,
							 Address:this.Address,
							 Age: this.age,
							  Sex: this.value,
							  Name:this.name,
							   Account:'jkdaUser'
							}).then(res=>{
								console.log(res);
								if(res.Code===200){
									let data1 = this.$store.state.vx_uid
									let data2 = '亲子'
									let data3 = this.phone
									
									DisposeUserrelationship(
										data1, data2, data3
									).then(res => {
										console.log(res);
										if(res.Code===200){
										uni.showModal({
											content: '绑定成功。',
											showCancel: false,
											success(res) {
												if (res.confirm) {
													uni.navigateTo({
														url:'../QAGL/QAGL'
													})
												}
											}
										})
										}	
									}).catch( res=> {
										console.log(res);
									})
								}
							})
						}
					})
					
				}else{
					uni.showToast({
						title: `请填写完整信息`,
						icon: 'error',
						duration: 2000
					})
				}
				
			}
		}
	}
</script>

<style scoped lang="scss">
	.page {
		width: 100vw;
		height: 100%;
		position: relative;
		display: flex;
		flex-direction: column;
		overflow: auto;

		.bt_1 {
			width: 622rpx;
			height: 98rpx;
			background: #1677FF;
			margin: 200rpx auto 20rpx;
			font-size: 36rpx;
			font-family: Source Sans Pro, Source Sans Pro;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 98rpx;
		}

		.phonenumber {
			width: 686rpx;
			height: 112rpx;
			border-bottom: 1rpx solid #E7E7E7;
			margin-left: 32rpx;

			.sp_1 {
				display: inline-block;
				margin-top: 32rpx;
				font-weight: 400;
				width: 200rpx;
				height: 48rpx;
				float: left;
				font-size: 32rpx;
				line-height: 48rpx;

				.sp_2 {
					color: red;
				}
			}

			.inp_1 {
				float: left;
				height: 70rpx;
				margin-top: 20rpx;
				border-radius: 10rpx;
				padding-left: 10rpx;
				border: 1rpx solid #e5e5e5;
			}

			.select {
				width: 350rpx;
				float: left;
				margin-top: 25rpx;
			}

		}
	}
</style>